<template>
  <div id="forum-view">
    <div class="left">
      <fly-button v-for="item in classify" class="left-button" :value="item"/>
    </div>
    <div class="content">
      <a-tabs>
        <a-tab-pane key="1" title="推荐">
          <fly-post :post="post" v-for="post in postList" :key="post.id"
                    @click="toDetail(post)"/>
        </a-tab-pane>
        <a-tab-pane key="2" title="最新">
          <fly-post :post="post" v-for="post in postList" :key="post.id"/>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="right">
      <fly-edit-button class="right-button" @click="router.push('/forum/new')"/>
      <fly-edit-button class="right-button" text="我发布的文章" @click="router.push('/forum/new')"/>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import FlyButton from "../../components/fly-button.vue";
import FlyPost from "../../components/fly-post.vue";
import FlyEditButton from "../../components/fly-edit-button.vue";
import myAxios from "../../plugins/myAxios.ts";
import {useRouter} from "vue-router";

const type = ref('line');
const router = useRouter()

const postList = ref([])
const classify = ref(['中医', '药方', '养生', '药材'])
const toDetail = async (post) => {
  const res = await myAxios.post('/post_view/', {
    postId: post.id
  })
  getPostList()
  const routeData = router.resolve({
    path: `/forum/${post.id}`
  });
  // 使用 window.open() 方法在新窗口中打开该 URL
  const newWindow = window.open(routeData.href, '_blank');

  // 如果用户的浏览器阻止了弹窗，newWindow 可能为 null
  if (newWindow) {
    // 新窗口成功打开后，您可以在此处添加额外的逻辑，如聚焦新窗口等
    newWindow.focus();
  }
}
const getPostList = () => {
  myAxios.post('/post/list/page/vo', {
    current: 1,
    pageSize: 10
  }).then(res => {
    postList.value = res.data.records
    console.log(postList.value)
  }).catch(err => {
    console.log(err)
  })
};
onMounted(() => {
  getPostList()
})
</script>

<style scoped>
:deep(.arco-tabs-tab-title) {
  font-size: 1.1rem;
  color: #909090;
}

:deep(.arco-tabs-tab-title):hover {
  color: #1E80FF;
}

:deep(.arco-tabs-tab-active) span {
  color: #000;
  font-weight: 500;
}

#forum-view {
  width: 100vw;
  margin-top: 18px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 0;
  grid-row-gap: 0;
  background-color: #F2F3F5;
}

.left {
  background-color: #FFFFFF;
  text-align: center;
  margin-left: 8vw;
  margin-top: 2rem;
  width: 15rem;
  border-radius: 10px;
  height: fit-content;
}

.left-button {
  width: 90%;
  margin: 0.5rem 0;
}

.content {
  margin-top: 20px;
  grid-area: 1 / 2 / 6 / 4;
  background-color: #FFFFFF;
  border-radius: 10px;
}

.right {
  grid-area: 1 / 4 / 4 / 5;
  background-color: #FFFFFF;
  margin-left: 2rem;
  margin-top: 2rem;
  width: 15rem;
  border-radius: 10px;
  height: fit-content;
  text-align: center;
}

.right-button {
  width: 90%;
  margin: 0.5rem 0;
}
</style>